<!--
 * @Author: tansq
 * @Date: 2021-09-17 15:34:16
 * @LastEditTime: 2021-09-24 14:08:01
 * @LastEditors: tansq
 * @Description: 
 * @FilePath: \hte-vue-dev\src\views\library\company\components\CompanyTeam.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->

<template>
  
      
      <div class="content">
        <a-form-model
          class="hte-form-model"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
           <section>
            <div class="section-header">
              主要人员信息
             
            </div>
             <div class="hte-btn-group" style="16px 0"> 
                <a-button class="hte-btn add-btn" type="primary" @click="importExcelDataBtn">导入</a-button>
                <a-button class="hte-btn add-btn" @click="handleDelete">删除</a-button>
             
            </div>
         
            <div class="section-table">
              <a-table
                class="hte-table-content"
                :columns="payColumns"
                :data-source="sourceData"
                :pagination="pagination"
                rowKey="rowKey"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :loading="tabLoading"
                bordered
                size="middle"
                @change="pageChange"
              >
                <template slot="num" slot-scope="text, record, index">
                  {{ (currPageIndex - 1) * currPageSize + parseInt(index) + 1 }}
                </template>
                <template slot="teamName" slot-scope="text, record">
                  <a-input v-model="record.teamName" />
                </template>
                <template slot="completedTotal" slot-scope="text, record">
                  <a-input v-model="record.completedTotal" />
                </template>
                <template slot="operation" slot-scope="text, record">
                  <a @click="handleDelete(record, 'sourceData')">删除</a>
                </template>
              </a-table>
            </div>
          </section>
        
        </a-form-model>        
        <excel-paste  :columnsExcel="payColumns" :exportXlsTemplateUrl="importExcle.exportXlsTemplateUrl"  :excelVisible="importExcle.excelVisible" :excelConfirmLoading="importExcle.excelConfirmLoading"   @handleOkExcel="handleOkExcel" @handleCancelExcel="handleCancelExcel"></excel-paste>
      </div>      
    
</template>
<script>
import {randomUUID} from '@/utils/util'
import { companyMixin,companyValidate } from '@/views/library/company/companyMixin'
export default {
  name:'CompanyTeam',
  components: {
    ExcelPaste:()=>import('@/components/excelPaste/ExcelPaste') 
  },
  mixins: [],
    props: {
    dics:{
      type:Object,
      default:()=>{return {}}
    }
  },
  data() {
    return {
     
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      form: {
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize:100
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      payColumns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          width: '50px',
          align: 'center',
            customRender:function (t,r,index) {
                return parseInt(index)+1;
            },
            isImportExcelColumns:false
        },
        {
          title: '公司名称',
          dataIndex: 'companyName',
         
          align: 'center',
        },
        {
          title: '职务',
          dataIndex: 'typeName',
          
          align: 'center',
        },
        {
          title: '人员名称',
          dataIndex: 'userName',
          
          align: 'center',
        },
      ],
      sourceData: [
       
      ],
      importExcle:{
        excelVisible:false,
        excelConfirmLoading:false,
        exportXlsTemplateUrl:'templates/excel/公司库主要人员信息模板.xlsx'
      },
      visibleModel: false,
     
      selectedRowKeys:[]
    }
  },
  created() {

  },
  mounted() {},
  methods: {
     pageChange(page) {
      this.currPageIndex = page.current
      this.currPageSize = page.pageSize
      this.pagination.current = page.current
      
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
  
    handleClassOk() {
      this.visibleModel = false
    },
    handlePersonnel(type, item) {
      if (type === 'edit') {
        Object.assign(this.visibleForm, item)
      }
      this.visibleModel = true
    },
    handleSelect(){

    },
      handleDelete(obj, list) {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！');
        return;
      } else {
      
        var that = this;
        this.$confirm({
          title: "确认删除",
          content: "是否删除选中数据?",
          onOk: function () {
              
              
              for (var a = 0; a < that.selectedRowKeys.length; a++) {
               let rowKey = that.selectedRowKeys[a]  ;
               
               that.sourceData.splice( that.sourceData.findIndex(item=>{return item.rowKey==rowKey}),1)
              }

             that.selectedRowKeys = [];
           
          }
        });
      }
    },
     handleOkExcel:function(data){
        let that = this;

          this.importExcle.excelConfirmLoading = true;
        for (let index = 0; index < data.length; index++) {

           const element = data[index];
             if(!element.companyName){
              this.$message.warning('操作异常:公司名称不能空');
              this.importExcle.excelConfirmLoading = false;
              return false;
            }
            if(!companyValidate.checkCompanyTeamData(this,element)){
              this.importExcle.excelConfirmLoading = false;
              return false;    
            }  
             element.rowKey = randomUUID() + new Date().getTime();
            
        }

         this.sourceData.push(...data)
        
         this.importExcle.excelConfirmLoading = false;
         this.handleCancelExcel();

      },
      importExcelDataBtn:function(){
        
         this.importExcle.excelConfirmLoading = false;
         this.importExcle.excelVisible = true;
      },
      handleCancelExcel:function(){
        this.importExcle.excelVisible = false;
       
      },
  },

}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
@import '~@views/library/company/company.less';
</style>
